import Vue from 'vue'
import App from './App'
import router from './router'
import './assets/css/reset.css'
import './assets/css/ele-reset.css'
import './assets/icon/iconfont.css'
import VueCookie from 'vue-cookie'
import axios from 'axios'
import store from './store/index.js'
import Bus from './bus'
import Vant from 'vant';
import 'vant/lib/index.css';


import moment from 'moment'//时间转化
axios.defaults.withCredentials = true // 让ajax携带cookienpm
axios.defaults.timeout = 60 * 5 * 1000 // 请求超时
axios.defaults.headers.post['Content-Type'] = 'application/json';
Vue.prototype.axios = axios
Vue.prototype.moment = moment;//时间引用
moment.locale('zh-cn');//汉化
Vue.use(VueCookie)
Vue.use(Bus);
Vue.config.productionTip = false
Vue.config.devtools = true
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.use(Vant);
// require('./mock/mock.js')
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})
//全局拖动指令
Vue.directive('drag',
  {
    bind:function (el) {
      let odiv = el;   //获取当前元素
      el.onmousedown = (e) => {
        //算出鼠标相对元素的位置
        let disX = e.clientX - odiv.offsetLeft;
        let disY = e.clientY - odiv.offsetTop;
        if(disY>105&& disY< 151){
          console.log('==:',disY>105&& disY< 151)
          return
        }
        let left = '';
        let top = '';
        document.onmousemove = (e)=>{
          //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
          left = e.clientX - disX;
          top = e.clientY - disY;
          //绑定元素位置到positionX和positionY上面
          //移动当前元素

          // if(top<0){
          //   top=0
          // }
          odiv.style.left = left + 'px';
          odiv.style.top = top + 'px';
        };
        document.onmouseup = (e) => {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      };
      el.ontouchstart = (e) => {
        let header_util=document.getElementById("header_util");
        let minHeight=header_util.clientHeight+header_util.offsetTop
        //算出鼠标相对元素的位置
        let disX = e.touches[0].clientX - odiv.offsetLeft;
        let disY = e.touches[0].clientY - odiv.offsetTop;
        if(disY>105&& disY< 151){
          return
        }
        let left = '';
        let top = '';
        console.log("开始拖动");
        document.ontouchmove = (e)=>{
          console.log("移动"+document.body.clientWidth);
          left = e.touches[0].clientX - disX;
          top = e.touches[0].clientY - disY;

          if (left <= 0) {
            left = 0;
          } else if (left >= document.documentElement.clientWidth - odiv.clientWidth){
            //document.documentElement.clientWidth 屏幕的可视宽度
            left = document.documentElement.clientWidth - odiv.clientWidth
          }
          if (top <= minHeight) {
            top = minHeight;
          } else if (top >= document.documentElement.clientHeight - odiv.clientHeight){
            // document.documentElement.clientHeight 屏幕的可视高度
            top = document.documentElement.clientHeight - odiv.clientHeight;
          }


          //绑定元素位置到positionX和positionY上面
          //移动当前元素
          odiv.style.left = left + 'px';
          // odiv.style.right =  '';
          odiv.style.top = top + 'px';
          odiv.style.position="absolute"
        };
        document.ontouchend= (e) => {
          console.log("结束");
          document.ontouchmove = null;
          document.ontouchend = null;
        };
      };
    }
  });
Vue.directive("inputNum", {
  update(el, {value = 0}, vnode) {  // 当被绑定的元素插入到 DOM 中时
    let iscancel = false;
    let num = value
    const inputEvent = e => {
      if (iscancel) {
        return false;
      }
      if(num=== 2){
        e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
      }else if(num ===1){
        e.target.value = (e.target.value.match(/^\d*(\.?\d{0,1})/g)[0]) || null
      }else {
        e.target.value = (e.target.value.match(/^\d*/g)[0]) || null
      }

      let v = e.target.value;//为绑定的值
      vnode.data.model.callback(v);//改变虚拟节点上v-model的值
    };
    el.oninput = inputEvent;
    //解决输入中文的问题
    el.addEventListener("compositionstart", e => {
      iscancel = true;
    });
    el.addEventListener("compositionend", e => {
      iscancel = false;
      inputEvent(e);
    });
  }
});

Vue.directive('thumbnails',{
  inserted:function (element,binding,vnode,oldVnode) {
    element.querySelector('.thumbnails-button').onclick = (e) => {

      let classNameArr=element.className.split(' '),
        flag=false,
        index=-1
      for(let i=classNameArr.length;i>=0;i--){
        if(classNameArr[i]==='thumbnails'){
          index=i
          flag=true
          break
        }
      }
      if(flag && index>0){
        classNameArr.splice(index, 1);
      }else{
        classNameArr.push('thumbnails')
      }
      element.className=classNameArr.join(' ')
    }
  }
})
